<template>
  <el-dialog
      draggable
      v-model="SparkVisible"
      title="智能问答"
      width="1200"
  >
    <div class="chat">
      <el-row v-for="i in SparkAnswer" :justify="i.type===1?'start':'end'" style="width: 100%">
        <el-avatar :size="30" v-show="i.type===1"> 小智</el-avatar>
        <div :class="i.type===1?'left':'right'">{{ i.msg }}</div>
        <el-avatar :size="30" v-show="i.type===0" style="background-color:transparent;">
          <img v-if="user.sex==='女'" src="@/assets/avatar-female.png" alt=" ">
          <img v-if="user.sex==='男'" src="@/assets/avatar-male.png" alt=" ">
        </el-avatar>
      </el-row>
    </div>

    <div v-show="SparkLoader" class="loader"></div>
    <div v-show="!SparkLoader" class="unloader"></div>

    <el-input
        style="margin-top: 20px;"
        v-model="SparkQuestion"
        :autosize="{ minRows: 3, maxRows: 5 }"
        type="textarea"
        placeholder="请输入你感兴趣的问题..."
        @keyup.enter.native="onSpark(formRef)"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button size="large" @click="closeVisible">取消</el-button>
        <el-button size="large" type="primary" @click="onSpark(formRef)">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {defineProps, onMounted} from 'vue'
import {defineModel} from 'vue'
import {ref} from 'vue'
import type {FormInstance} from 'element-plus'

const formRef = ref<FormInstance>();
const SparkVisible = defineModel('visible');
const SparkQuestion = defineModel('question');
const SparkAnswer = defineModel('answer');
const SparkLoader = defineModel('loader');

interface Props {
  onSpark?: Function;
}

defineProps<Props>();

function closeVisible() {
  SparkVisible.value = false;
}

const user = ref({});
onMounted(() => {
  user.value = JSON.parse(localStorage.getItem("user"));
})

</script>

<style scoped>
:deep(.el-avatar) {
  margin: 2px 5px;
  font-size: 12px;
}

.chat {
  padding: 20px 10px;
  min-height: 50vh;
  overflow: scroll;
  background-color: #f1f1f1;
}

.left {
  padding: 5px;
  float: left;
  height: auto;
  max-width: 60%;
  background-color: #fff;
  border-radius: 5px;
  line-height: 25px;
}

.right {
  padding: 5px;
  float: right;
  max-width: 60%;
  height: auto;
  color: white;
  background-color: #047c39;
  border-radius: 5px;
  line-height: 25px;
}

/*  loading   */
.unloader {
  height: 2px;
}

.loader {
  display: block;
  --height-of-loader: 2px;
  --loader-color: #0071e2;
  width: 100%;
  height: var(--height-of-loader);
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0.2);
  position: relative;
}

.loader::before {
  content: "";
  position: absolute;
  background: var(--loader-color);
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-radius: 30px;
  animation: moving 1s ease-in-out infinite;;
}

@keyframes moving {
  50% {
    width: 100%;
  }

  100% {
    width: 0;
    right: 0;
    left: unset;
  }
}

/*scroll*/
/* 针对Webkit核心的浏览器（如Chrome和Safari） */
::-webkit-scrollbar {
  width: 4px;
  height: 0;
}

::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  /* 滚动条滑块的背景颜色 */
  border-radius: 6px;
  /* 滑块的圆角 */
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* 滚动条轨道的背景颜色 */
}

scrollbar {
  -moz-appearance: none;
  width: 12px;
  height: 12px;
}

scrollbar-thumb {
  background: #c0c0c0;
  border-radius: 6px;
}

scrollbar-track {
  background: #f1f1f1;
}
</style>